<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>我的地址</title>
		<link rel="stylesheet" type="text/css" href="__API__/lib/css/swiper.min.css">
		<link rel="stylesheet" type="text/css" href="__API__/lib/css/mui.css?v=1">
		<link rel="stylesheet" type="text/css" href="__API__/lib/css/mobileSelect.css" />
		<link rel="stylesheet" href="__API__/lib/css/style.css">
		<script type="text/javascript" src="__API__/lib/js/jquery-1.11.0.min.js"></script>
		<script type="text/javascript" src="__API__/lib/js/mui.js"></script>
		<script src="__API__/lib/js/mobileSelect.js" type="text/javascript" charset="utf-8"></script>
		<script src="__API__/lib/js/city.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript" src="__API__/lib/js/swiper.min.js"></script>
		<script type="text/javascript" src="__API__/lib/js/vue.min.js"></script>
		<script type="text/javascript" src="__API__/lib/js/common.js"></script>
		<script type="text/javascript" src="__API__/lib/js/index.js"></script>
	<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script></head>

	<body>
		<div class="page_box" :class="addressList.length > 0 ? 'bg_color':''" id="app" style="min-height: 100vh;">
			<div class="address_cont">
				<ul class="address_list" v-if="addressList.length > 0">
					<li v-for="(item,i) in addressList" :key="i">
						<div class="address_li">
							<div class="icon"><img src="__API__/lib/images/address.png" alt=""></div>
							<div class="right">
								<p><span>收件人：{{item.name}} </span><span>{{item.mobile}}</span></p>
								<p>地址：{{item.area_info}}{{item.address}}</p>
							</div>
						</div>
						<div class="add_bot">
							<span @click="goDetail('add_address.html?type=1&id=' + item.id)"><img src="__API__/lib/images/edit.png" alt="">编辑</span>
							<span @click="deleteFun(i)"><img src="__API__/lib/images/del.png" alt="">删除</span>
						</div>
					</li>
				</ul>
				<div class="null_box" v-else>
					<div class="img"><img src="__API__/lib/images/address_null.png" alt=""></div>
					<p>您还没有收货地址哦~</p>
				</div>
				<div class="blue_btn address_btn" @click="goDetail('add_address.html')">添加新地址</div>
			</div>
		</div>
		<script>
			var app = null;
			app = new Vue({
				el: '#app',
				data: {
					addressList: [
					],
				},
				created: function() {

					var that = this;

					common.ajax("{:url('Address/index')}",{token:localStorage.getItem('token')} , function(res) {
						//common.showToast(res.msg);
						that.addressList = res.data;
						// that.getData(searchValue);
					})
				},
				methods: {
					goDetail(url) {
						common.openUrl(url)
					},
					// 删除当前项
					deleteFun(index) {
						let that = this;

						var id = that.addressList[index].id;
						console.log(id);
						common.Confirm('确定要删除此商品？', ' ', function() {
							that.addressList.splice(index, 1) // 删除当前项
							common.ajax("{:url('Address/destory')}",{token:localStorage.getItem('token'),id:id} , function(res) {
								common.showToast(res.msg);

								// that.getData(searchValue);
							})
					
						})
					
					},
				}
			});
		</script>
	</body>

</html>
